<template>
  <div class="index-apartment-box">
    <h1>热门留学生公寓</h1>
    <div class="flex-row-center city-label-box">
      <div v-for="(city,index) in hotCityList" class="city-label" @click="handleClickCity(city,index)"
           :style="{borderColor:activeCityIndex===index?'gold':''}">
        {{city.cityName}}
      </div>
    </div>
    <div class="flex-col-start" style="min-height: 400px">
      <div class="flex-row-start" >
        <ApartmentCard v-for="apartment in apartmentList"
                       @click="handleClickApartment(apartment)"
                       :item="apartment"
                       style="margin: 10px">

        </ApartmentCard>
      </div>

    </div>

    <div class="flex-row-center" style="margin-top: 30px" >
      <TransButton color="#38B2A6" active-color="tomato" style="width: 350px;height: 50px">
        查看伦敦所有学生公寓
      </TransButton>
    </div>

  </div>
</template>

<script>
import ApartmentCard from "@/components/card/ApartmentCard.vue";
import TransButton from "@/components/button/TransButton.vue";
import {getHotCity} from "@/api/city/city";
import apartmentApi from "@/api/apartment/apartment";

export default {
  name: "IndexApartmentBox",
  components: {TransButton, ApartmentCard},
  data() {
    return {
      activeCityIndex:3,
      hotCityList:[

      ],
      apartmentList:[],

    }
  },
  methods: {
    getApartmentVoByCityId(cId){
      apartmentApi.getDetailListByCityId(cId).then(resp=>{
        if(resp.code  === 200){
          this.apartmentList=resp.data.list
        }
      })
    },
    handleClickCity(city,index){
      this.activeCityIndex=index
      let id=city.id
      this.getApartmentVoByCityId(id)
    },
    handleClickApartment(item){

      this.$router.push({
        path:"/index/apartment/detail",
        query:{
          aId:item.id
        }
      })
    },
    getHotCity(){
      getHotCity().then(resp=>{
        this.hotCityList=resp.data
        this.getApartmentVoByCityId(this.hotCityList[this.activeCityIndex].id)
      })
    }
  },
  mounted() {
    this.getHotCity()
  }
}
</script>

<style scoped lang="less">
  .index-apartment-box{

    .city-label-box{
      width: 100%;
      height: 100px;
      .city-label{
        margin: 0 10px;
        color: grey;
        font-size: 16px;
        cursor: pointer;
        padding: 3px;
        border-bottom: 3px solid transparent;
        transition: all 0.3s;
        &:hover{
          border-bottom: 3px solid gold;
        }

      }
    }
  }
</style>